<script>
import SonCom from "@/components/sonCom.vue";
import SonCom1 from "@/components/sonCom1.vue";

export default {
  name: "fatherPage",
  components: {SonCom1, SonCom},
  data() {
    return {
      giveSonData: '父组件的数据',
      giveSonData1: [1, 2, 3]
    }
  },
  methods:{
    sonData(data){
      console.log(data,'子组件的数据123')
    }
  }
}
</script>

<template>
  <div>
    父组件
    <!--  一、父传子
            1.在父组件中的子标签中自定义一个属性
            2.在子组件中用props接收
      -->
    <son-com :giveSon="giveSonData"></son-com>
    <son-com :giveSon1="giveSonData1"></son-com>
    <!--  二、子传父
          1.在父组件中的子标签中自定义一个方法，方法中的参数就是子组件传过来的数据
          2.在子组件中$emit('自定义方法名',传递的参数)方法中进行传参
      -->
    <son-com1 @fromSon="sonData"></son-com1>
  </div>
</template>

<style scoped lang="less">

</style>